import React, { useState, useCallback, useEffect } from 'react';
import MyHeader from './componets/header';
import AddInput from './componets/addinput';
import TodoItem from './componets/todoitem';
import CheckModel from './componets/model/checkmodel';
import EditorkModel from './componets/model/editormodel';
import TodoChartModel from './componets/model/todoechart';
import ResetModel from './componets/model/resetmodel';
import NodataTip from './componets/nodata';
import { List, DatePicker, SearchBar, Button, Icon, Toast, Modal } from 'antd-mobile';
import { formataTodayTime, formateTodayDay, formatDataWeekDay } from './libs/util';
import './App.css';
import 'antd-mobile/dist/antd-mobile.css';

function App() {
  const alert = Modal.alert;
  const [isInputShow, setInputShow] = useState(false),
    [isShowCheckModel, setCheckModel] = useState(false),
    [isShowEditorModel, setEditorModel] = useState(false),
    [isShowResetModel, setisShowResetModel] = useState(false),
    [isShowTodayTime, setisShowTodayTime] = useState(true),
    [isShowTommoryButton, setisShowTommoryButton] = useState(true),
    [dataValue, setdataValue] = useState(null),
    [isShowTodayButton, setisShowTodayButton] = useState(false),
    [isShowNoReasultData, setisShowNoReasultData] = useState(false),
    [isShowMyMenu, setisShowMyMenu] = useState(false),
    [isShowFirstPage, setisShowFirstPage] = useState(true),
    [todoList, setTodoList] = useState([]),
    [resulttodoList, setresulttodoList] = useState([]),
    [isShowTodoChartModel, setShowTodoChartModel] = useState(false),
    [currentData, setCurrentData] = useState({});

  /**
   * 将数据存到本地
   * 注意useEffect钩子执行有顺序
   */
  //  [{"id":1628475830000,"content":"98456","completed":false},{"id":1628583324468,"content":"举行葬礼","completed":false},{"id":1628583285748,"content":"5894","completed":false},{"id":1628583305943,"content":"kilo硬盘","completed":false},{"id":1628389430000,"content":"app成功了吗","completed":false}]
  useEffect(() => {
    const todoData = JSON.parse(localStorage.getItem('todoData') || '[]');
    setTodoList(todoData);
  }, []);
  useEffect(() => {
    localStorage.setItem('todoData', JSON.stringify(todoList));
  }, [todoList]);
  const addItem = useCallback((val) => {
    const dataItem = {
      id: new Date().getTime(),
      content: val,
      completed: false
    };

    setTodoList((todoList) => [...todoList, dataItem].reverse());
    setInputShow(false);
  }, []);

  const completedClick = useCallback((id, mark) => {
    setTodoList((todoList) => todoList.map(item => {
      if (item.id === id) {
        item.completed = !mark;
      }
      return item;
    }))
  }, []);
  const removeItem = useCallback((id) => {
    setTodoList((todoList) => todoList.filter(item => item.id !== id))
    setresulttodoList((resulttodoList) => resulttodoList.filter(item => item.id !== id))
  }, [])
  const openCheckModel = useCallback((id) => {
    _setCurrentData(todoList, id);
    setCheckModel(true);
  }, [todoList]);

  const openEditorModel = useCallback((id) => {
    _setCurrentData(todoList, id);
    setEditorModel(true);
  }, [todoList]);
  const opentodoShowModel = () => {
    setShowTodoChartModel(true);
    setisShowMyMenu(false);
  }

  const submitEditorData = useCallback((newData, id) => {
    setTodoList((todoList) =>
      todoList.map((item) => {
        if (item.id === id) {
          item = newData;
        }
        return item;
      })
    );
    setresulttodoList(
      (resulttodoList) =>
        resulttodoList.map((item) => {
          if (item.id === id) {
            item = newData;
          }
          return item;
        })
    )
    setEditorModel(false);
  }, []);
  const getTodayTodoItem = (todoList) => {
    let newDataList = [];
    for (let i = 0; i < todoList.length; i++) {
      if (formataTodayTime(todoList[i].id) === formataTodayTime(new Date())) {
        newDataList.push(todoList[i]);
      }
    }
    return newDataList;
  }
  const resultTodo = (todoList, value) => {
    setresulttodoList(todoList.filter(item => formataTodayTime(item.id) === value).map((item) => { return item; }));
    // console.log(todoList.filter(item => formataTodayTime(item.id) === value));
  }
  const clearReasultData = (resulttodoList) => {
    resulttodoList.map(item => removeItem(item.id));
    resulttodoList.length === 0
      ?
      Toast.info('当前没有可删数据', 1)
      :
      Toast.info('删除成功', 1);
  };
  function _setCurrentData(todoList, id) {
    setCurrentData(() => todoList.filter(item => item.id === id)[0]);
  }
  return (
    <div className="App">
      <CheckModel
        isShowCheckModel={isShowCheckModel}
        data={currentData}
        closeModel={() => setCheckModel(false)}
      />
      <EditorkModel
        isShowEditorModel={isShowEditorModel}
        data={currentData}
        submitEditorData={submitEditorData}
      />
      {
        resulttodoList.length === 0
          ?
          isShowTodayButton
            ?
            <TodoChartModel
              isShowTodoChartModel={isShowTodoChartModel}
              data={getTodayTodoItem(todoList)}
              title='今日统计图'
              closetodoModel={() => setShowTodoChartModel(false)}
            />
            :
            <TodoChartModel
              isShowTodoChartModel={isShowTodoChartModel}
              data={formatDataWeekDay(todoList)}
              title='本周统计图'
              closetodoModel={() => setShowTodoChartModel(false)}
            />
          :
          <TodoChartModel
            isShowTodoChartModel={isShowTodoChartModel}
            data={resulttodoList}
            title='搜索统计图'
            closetodoModel={() => setShowTodoChartModel(false)}
          />
      }
      <ResetModel
        isShowResetModel={isShowResetModel}
        closeModel={() => setisShowResetModel(false)}
        closeResetModel={() => { localStorage.clear(); setTodoList([]); setisShowResetModel(false); }}
      />
      <div style={{ 'filter': isShowCheckModel || isShowEditorModel || isShowTodoChartModel || isShowResetModel ? 'blur(5px)' : '' }}>
        <MyHeader openInput={() => setInputShow(!isInputShow)} />
        <AddInput
          isInputShow={isInputShow}
          addItem={addItem}
        />
        {
          isShowTodayTime
            ?
            (
              <div className="notification is-primary is-light" style={{ position: 'absolute',right: '1.5rem' ,top: '2.8rem' }}>
                <button className="delete" onClick={() => setisShowTodayTime(false)}></button>
                <strong>{formateTodayDay(new Date())}</strong>, {formataTodayTime(new Date())}
                {
                  isShowFirstPage
                  ?
                  ''
                  :
                  (
                    <>
                    <br></br>
                    <strong>总计</strong>
                    { todoList.length }
                    <strong>条</strong>
                    </>
                  )
                }
              </div>
            )
            :
            ''
        }

        {
          !todoList || todoList.length === 0
            ?
            (
              <NodataTip margingTop='nodata' />
            )
            :
            (
              <>
                {
                  isShowFirstPage
                    ?
                    (
                      <>
                        <DatePicker
                          mode="date"
                          title="选择日期"
                          value={dataValue}
                          onChange={date => { setdataValue(date); setisShowNoReasultData(false); }}
                        >
                          <List.Item arrow="horizontal">
                            搜索
                          </List.Item>
                        </DatePicker>
                        <SearchBar
                          onClear={() => { setdataValue(null); setresulttodoList([]) }}
                          cancelText=' '
                          disabled={true}
                          value={dataValue == null ? ' ' : formataTodayTime(new Date(dataValue))}
                        />
                        {

                          dataValue === null
                            ?
                            ''
                            :
                            (
                              <>
                                <Icon type="cross-circle" className="my-clear-btn" size='xxs' color="#2dfdfe" />
                                <Button onClick={() => { setisShowNoReasultData(true); resultTodo(todoList, formataTodayTime(new Date(dataValue))); }} type="primary" size="small" className="my-search-btn-left" inline>搜索</Button>
                                <Button onClick={() => {
                                  alert('删除', '确定删除查询的所有事件', [
                                    { text: '取消', onPress: () => { return; } },
                                    {
                                      text: '确定', onPress: () => {
                                        clearReasultData(resulttodoList);
                                        setdataValue(null);
                                        setresulttodoList([]);
                                      }
                                    },
                                  ]);
                                }} type="warning" size="small" className="my-search-btn-right" inline>删除</Button>
                              </>
                            )
                        }

                        <ul className="todo-list" id="todo-list">

                          {
                            dataValue === null
                              ?
                              isShowTodayButton
                                ?
                                getTodayTodoItem(todoList).map((item, index) => {
                                  return (
                                    <TodoItem
                                      data={item}
                                      key={index}
                                      openCheckModel={openCheckModel}
                                      openEditorModel={openEditorModel}
                                      completedClick={completedClick}
                                      removeItem={removeItem}
                                    />
                                  )
                                })
                                :
                                formatDataWeekDay(todoList).map((item, index) => {
                                  return (
                                    <TodoItem
                                      data={item}
                                      key={index}
                                      openCheckModel={openCheckModel}
                                      openEditorModel={openEditorModel}
                                      completedClick={completedClick}
                                      removeItem={removeItem}
                                    />
                                  )
                                })
                              :
                              resulttodoList.length === 0 && isShowNoReasultData
                                ?
                                <NodataTip margingTop='noresultdata' />
                                :
                                (
                                  resulttodoList.map((item, index) => {
                                    return (
                                      <TodoItem
                                        data={item}
                                        key={index}
                                        openCheckModel={openCheckModel}
                                        openEditorModel={openEditorModel}
                                        completedClick={completedClick}
                                        removeItem={removeItem}
                                      />
                                    )
                                  })
                                )
                          }
                        </ul>
                      </>
                    )
                    :
                    (
                      <div className="history-data">
                        <div>
                        <span className="tag is-success is-rounded my-hisoty-tags">已完成{todoList.filter(item => item.completed === true).length}条</span>
                        {
                          todoList.filter(item => item.completed === true).map((item, index) => {
                            return (
                              <TodoItem
                                data={item}
                                key={index}
                                openCheckModel={openCheckModel}
                                openEditorModel={openEditorModel}
                                completedClick={completedClick}
                                removeItem={removeItem}
                              />
                            )
                          })
                        }
                        </div>
                        <div>
                        <span className="tag is-link is-rounded my-hisoty-tags my-is-link">未完成{todoList.filter(item => item.completed === false).length}条</span>
                        {
                          todoList.filter(item => item.completed === false).map((item, index) => {
                            return (
                              <TodoItem
                                data={item}
                                key={index}
                                openCheckModel={openCheckModel}
                                openEditorModel={openEditorModel}
                                completedClick={completedClick}
                                removeItem={removeItem}
                              />
                            )
                          })
                        }
                        </div>
                      </div>
                    )
                }
                {
                  isShowMyMenu
                  ?
                  (
                 <div className="my-menu-list">
                  <ul>
                    <li onClick={() => {
                      setisShowFirstPage(!isShowFirstPage)
                      setisShowMyMenu(false)
                      }}>
                    <svg t="1630034658088" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2132" width="64" height="64"><path d="M391.8848 945.1008h421.632c73.5232 0 133.12-59.5968 133.12-133.12V390.3488c0-73.5232-59.5968-133.12-133.12-133.12H391.8848c-73.5232 0-133.12 59.5968-133.12 133.12v421.632c0 73.5232 59.5968 133.12 133.12 133.12z" fill="#A5ADF6" p-id="2133"></path><path d="M207.0528 760.2688h421.632c73.5232 0 133.12-59.5968 133.12-133.12V205.4656c0-73.5232-59.5968-133.12-133.12-133.12H207.0528c-73.5232 0-133.12 59.5968-133.12 133.12v421.632c0 73.5744 59.648 133.1712 133.12 133.1712z" fill="#A5ADF6" p-id="2134" data-spm-anchor-id="a313x.7781069.0.i2" className="selected"></path><path d="M398.6944 257.2288h363.1104v363.1104c0 77.2608-62.6176 139.9296-139.9296 139.9296H258.816V397.1072c0-77.2608 62.6176-139.8784 139.8784-139.8784z" fill="#635DF7" p-id="2135" data-spm-anchor-id="a313x.7781069.0.i1" className="selected"></path><path d="M752.8448 568.5248h-293.376c-22.6304 0-40.96-18.3296-40.96-40.96s18.3296-40.96 40.96-40.96h202.1376l-23.808-26.7776a40.87808 40.87808 0 0 1 3.4304-57.8048 40.87808 40.87808 0 0 1 57.8048 3.4304l84.4288 94.976c10.7008 12.032 13.3632 29.2864 6.7584 43.9808s-21.248 24.1152-37.376 24.1152zM543.8976 810.9568c-11.3152 0-22.528-4.6592-30.6176-13.7728l-84.4288-94.976a40.97536 40.97536 0 0 1-6.7584-43.9808 40.99584 40.99584 0 0 1 37.376-24.1664h293.3248c22.6304 0 40.96 18.3296 40.96 40.96s-18.3296 40.96-40.96 40.96h-202.1376l23.808 26.7776a40.87808 40.87808 0 0 1-3.4304 57.8048 40.43776 40.43776 0 0 1-27.136 10.3936z" fill="#F7F8F8" p-id="2136" data-spm-anchor-id="a313x.7781069.0.i0" className="selected"></path></svg>
                    <span>切换页面</span>
                    </li>
                    <li onClick={() => {
                      setisShowResetModel(true)
                      setisShowMyMenu(false)
                      }}>
                    <svg t="1630044733125" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4752" width="64" height="64"><path d="M0 0h1024v1024H0z" fill="#1296db" opacity=".01" p-id="4753"></path><path d="M360.448 269.596444a28.444444 28.444444 0 0 1-5.063111 39.879112A256 256 0 0 0 512 768a28.444444 28.444444 0 1 1 0 56.888889 312.888889 312.888889 0 0 1-191.431111-560.355556 28.444444 28.444444 0 0 1 39.879111 5.063111zM512 199.111111a312.888889 312.888889 0 0 1 187.448889 563.427556 28.444444 28.444444 0 1 1-34.133333-45.511111A256 256 0 0 0 512 256a28.444444 28.444444 0 0 1 0.056889-56.888889z" fill="#1296db" p-id="4754"></path><path d="M369.777778 227.555556a28.444444 28.444444 0 0 1 28.444444 28.444444v170.666667a28.444444 28.444444 0 0 1-56.888889 0V284.444444H199.111111a28.444444 28.444444 0 0 1 0-56.888888h170.666667zM654.222222 796.444444a28.444444 28.444444 0 0 1-28.444444-28.444444v-170.666667a28.444444 28.444444 0 1 1 56.888889 0V739.555556h142.222222a28.444444 28.444444 0 0 1 0 56.888888h-170.666667z" fill="#1296db" p-id="4755"></path></svg>
                    <span>清空记录</span>
                    </li>
                    <li onClick={opentodoShowModel}>
                    <svg t="1627544752332" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8854" data-spm-anchor-id="a313x.7781069.0.i20" width="64" height="64"><path d="M599.978667 509.013333h271.36a64.426667 64.426667 0 0 1 63.061333 76.245334 426.666667 426.666667 0 0 1-753.664 189.525333 426.666667 426.666667 0 0 1 257.365333-685.482667 64.512 64.512 0 0 1 76.544 63.061334v271.36a85.333333 85.333333 0 0 0 85.333334 85.333333z" fill="#f4ea2a" p-id="8855" data-spm-anchor-id="a313x.7781069.0.i19" className="selected"></path><path d="M840.576 183.082667a343.978667 343.978667 0 0 1 92.501333 166.954666 64 64 0 0 1-62.848 77.525334H681.386667a85.333333 85.333333 0 0 1-85.333334-85.333334V153.472a64 64 0 0 1 77.568-62.848A343.978667 343.978667 0 0 1 840.533333 183.04z" fill="#2c2c2c" p-id="8856" data-spm-anchor-id="a313x.7781069.0.i18" className=""></path></svg>
                    <span>统计图表</span>
                    </li>
                  </ul>
                </div>
                  )
                  :
                  ''
                }
                <div className="my-menu">
                  {
                    isShowMyMenu
                    ?
                    (
                      <svg onClick={() => setisShowMyMenu(!isShowMyMenu) } t="1630049215641" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7215" width="64" height="64"><path d="M794.8 794.8c-14 14-36.9 14-50.9 0L229.2 280.1c-14-14-14-36.9 0-50.9s36.9-14 50.9 0L794.9 744c13.9 13.9 13.9 36.8-0.1 50.8z" p-id="7216" fill="#ffffff"></path><path d="M794.8 229.2c14 14 14 36.9 0 50.9L280.1 794.8c-14 14-36.9 14-50.9 0s-14-36.9 0-50.9L744 229.1c13.9-13.9 36.8-13.9 50.8 0.1z" p-id="7217" fill="#ffffff"></path></svg>
                    )
                    :
                    (
                      <svg onClick={() => setisShowMyMenu(!isShowMyMenu) } t="1630043577571" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3771" width="64" height="64"><path d="M85.333333 231.381333c0-21.76 17.962667-39.381333 40.149334-39.381333H898.56c22.186667 0 40.149333 17.621333 40.149333 39.381333s-17.962667 39.381333-40.149333 39.381334H125.44A39.765333 39.765333 0 0 1 85.333333 231.381333zM85.333333 512c0-21.76 17.962667-39.381333 40.149334-39.381333H898.56c22.186667 0 40.149333 17.621333 40.149333 39.381333s-17.962667 39.381333-40.149333 39.381333H125.44A39.765333 39.765333 0 0 1 85.333333 512z m40.149334 241.237333a39.765333 39.765333 0 0 0-40.149334 39.381334c0 21.76 17.962667 39.381333 40.149334 39.381333H898.56c22.186667 0 40.149333-17.621333 40.149333-39.381333a39.765333 39.765333 0 0 0-40.149333-39.381334H125.44z" p-id="3772" fill="#ffffff"></path></svg>
                    )
                  }
                </div>
                {
                  isShowFirstPage
                    ?
                    (
                      <div className="today-tommorry-btn">
                        {
                          isShowTodayButton
                            ?
                            (
                              <span className="tag is-link">今日</span>
                            )
                            :
                            (
                              <span onClick={() => { setisShowTodayButton(true); setisShowTommoryButton(false); }} className="tag is-link is-light">今日</span>
                            )
                        }
                        {
                          isShowTommoryButton
                            ?
                            (
                              <span className="tag is-link my-todo-all">本周</span>
                            )
                            :
                            (
                              <span onClick={() => { setisShowTommoryButton(true); setisShowTodayButton(false); }} className="tag is-info is-light my-todo-all">本周</span>
                            )
                        }
                      </div>
                    )
                    :
                    ''
                }
              </>
            )
        }
      </div>
    </div>
  );
}

export default App;
